<template>
    <div>

        <!-- 卡片视图 -->
        <el-card>
            <!-- 头部 -->
            <el-row :gutter="20">
                <el-col :span="1.5">
                    <p>题目ID:</p>
                </el-col>
                <el-col :span="4">
                    <div>
                        <el-input v-model="input" placeholder="请输入题目ID"></el-input>
                    </div>
                </el-col>
                <el-col :span="1.5">
                    <p>学科:</p>
                </el-col>
                <el-col :span="4">
                    <div>
                        <el-select v-model="value" clearable placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="1.5">
                    <p>题型:</p>
                </el-col>
                <el-col :span="4">
                    <div>
                        <el-select v-model="text" clearable placeholder="请选择">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <!-- 查询 -->
                <el-col :span="1.8">
                    <div>
                        <el-button type="primary" @click="getData()">查询</el-button>
                    </div>
                </el-col>
                <!-- 导入 -->
                <el-col :span="1.8">
                    <div>
                        <el-popover placement="bottom" v-model="visible">
                            <div style="text-align: right;display: flex;">
                                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                                    <el-button type="success" @click="visible = false">题库导入</el-button>
                                </el-upload>
                            </div>
                            <el-button type="primary" slot="reference" @click="visible = false">导入</el-button>
                        </el-popover>
                    </div>
                </el-col>
            </el-row>
            <!-- 数据表 -->
            <el-table :data="userList" border stripe><!-- 带边框、斑马纹 -->
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="电话" prop="mobile"></el-table-column>
                <el-table-column label="角色" prop="role_name"></el-table-column>
                <el-table-column label="状态" prop="mg_state">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="{}">
                        <!-- 放置修改、删除和分配角色按钮 -->
                        <el-tooltip effect="dark" content="修改" placement="top">
                            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除" placement="top">
                            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="分配角色" placement="top">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>
   
<script>
import { pageLink } from "@/apis/shimengtong/Index"
export default {
    data() {
        return {
            //获取用户列表的参数对象
            queryInfo: {
                query: "",
                pagenum: 1, //当前的页数
                pagesize: 2, //每页的数量
            },
            tableData: [],
            total: 0
        };
    },
    mounted() {
        this.getUsersList();
    },
    methods: {
        getUsersList() {
            pageLink(this.queryInfo).then((ok) => {
                console.log(ok);
                //c错误信息
                // if (ok.meta.status != 200) {
                //     return this.$message.error("获取用户列表失败！");
                // }
                // this.userList = ok.users;
                // this.total = ok.total;
            })
        },
        //监听 pagesize 改变的事件
        handleSizeChange(newSize) {
            console.log(newSize);
            this.queryInfo.pagesize = newSize;//重新指定每页数据量
            this.getUsersList();//带着新的分页请求获取数据
        },
        //监听 页码值 改变的事件
        handleCurrentChange(newPage) {
            console.log(newPage);
            this.queryInfo.pagenum = newPage;//重新指定当前页
            this.getUsersList();//带着新的分页请求获取数据
        }
    },
    
};
</script>
   
<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

p {
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-weight: 600;
}
</style>